<template>
  <div class="buttonGroup-wrapper">
    <div class="buttonGroup-container">
      <div class="button-group">
        <el-button class="left-button" @click="action" :disabled="disabled">{{ buttonText }}</el-button>
        <el-button class="right-button" @click="quit">取消</el-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";

@Component({})
export default class buttonGroup extends Vue {
  @Prop({ default: "下一步" }) buttonText!: string; //第一个按钮的内容
  @Prop({ default: false }) disabled!: boolean; //第一个按钮是否禁用
  @Prop({ type: Function, default: () => {} }) action!: Function; //第一个按钮的下一步事件
  @Prop({ type: Function, default: () => {} }) quit!: Function; //第二个按钮的点击事件
}
</script>

<style scoped lang="less">
.buttonGroup-wrapper {
  margin-top: 60px;
}
</style>
